<template>
  <div>
    <Head :item="1"></Head>
    <br /><br /><br />
    <div class="container">
      <div
        class="media border p-3"
        v-for="(item, index) in articles" :key="item.id"
        v-on:click="selectitem(item.id)"
      >
        <div class="media-left">
          <img
            :src="$imageUrl + item.thumbnail"
            class="img-thumbnail"
            style="width: 150px"
          />
        </div>
        <div class="media-body">
          <h3>{{ item.title }}</h3>
          <br />
          <p>
            发表日期：{{ item.created }} &emsp;点击量：{{
              item.hits
            }}&emsp;评论量：{{ item.comments }} &emsp;<a
              href="javascript:;"
              @click.stop="Delete($event, index)"
              >删除</a
            >
            &emsp;
            <a @click.stop="Modify($event, item.id)" href="javascript:;"
              >修改</a
            >
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/Head";

export default {
  name: "Articles",
  data() {
    return {
      articles: "",
    };
  },
  methods: {
    selectitem(id) {
      this.$router.push({
        path: "articleDetail",
        query: { id: id },
      });
    },
    Delete(e, index) {
      //阻止冒泡
      e.stopPropagation();
      //数据库操作
      this.$axios
        .delete("article/" + this.articles[index].id)
        .then((response) => {
          console.log(response.data);
          this.articles.splice(index, 1); //从下标i开始删除1个元素：删除下标为i的元素
        })
        .catch((error) => console.log(error)); // 请求失败处理
    },
    Modify(e, id) {
      e.stopPropagation();
      this.$router.push({
        path: "articleEdit",
        query: { id: id },
      });
    },
  },
  mounted() {
    //发送get请求
    this.$axios
      .get("articles")
      .then((response) => (this.articles = response.data.data))
      .catch((error) => console.log(error)); // 请求失败处理
  },
  components: {
    Head: Head,
  },
};
</script>

